<template>
    <div>
        <Card class="card-info">
            <span class="lstick"></span>
            <div class="info-wrap">
                <img :src="icon" class="icon" />
                <div class="content">
                    <h6 class="text">{{ title }}</h6>
                    <h2 class="mt" :id="id"></h2>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import { CountUp } from 'countup.js';
export default {
    name: 'cardInfo',
    components: {},
    props: {
        id: {
            type: String,
            default: 'countup'
        },
        icon: {
            type: String,
            default: 'https://ooo.0o0.ooo/2019/11/22/OSp4jzy5TrLAvM3.png'
        },
        title: {
            type: String,
            default: '-'
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {};
    },
    methods: {
        init() {
            this.$nextTick(() => {
                let demo = new CountUp(this.id, this.value);
                if (!demo.error) {
                    demo.start();
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
.card-info {
    .lstick {
        background: #478ef9;
        width: 2px;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        left: 0;
        top: 38px;
    }
    .info-wrap {
        display: flex;
        align-items: center;
        height: 70px;
        .icon {
            display: inline-block;
            width: 55px;
            margin-right: 1rem;
        }
        .content {
            display: flex;
            flex-direction: column;
            .text {
                color: #99abb4;
                font-size: 0.875rem;
                margin-top: 0.5rem;
            }
            .mt {
                font-size: 1.5rem;
                margin-bottom: 0.5rem;
                font-weight: 400;
                line-height: 1.2;
                color: #67757c;
            }
        }
    }
}
</style>
